<template>
  <div class="box">
    <div class="resBgc">
      <el-tabs v-model="activeName" :stretch="true" style="width: 100%" tab-position="top">
        <el-tab-pane label="首页" name="home">
          <div class="bgc" style="width: 180px">
            您余生还剩
            <battery :num="user.lifePercentage"></battery>
            {{ user.lifePercentage }}%
          </div>
          <div class="bgc">
            <span>{{ user.lifeSecond }} 秒 <strong>|</strong></span>
            <span>{{ user.lifeDay }} 天 <strong>|</strong></span>
            <span>{{ user.lifeMonth }} 月 <strong>|</strong></span>
            <span>{{ user.lifeYear }} 年 </span>
          </div>
          <div class="bgc">剩下的日子 , 你大约可以</div>
          <div class="bgc">
            <span>吃饭</span>
            <span>{{ user.lifeEat }}次</span>
          </div>
          <div class="bgc">
            <span>洗澡</span>
            <span>{{ user.wash }}次</span>
          </div>
          <div class="bgc">
            <span>看电影</span>
            <span>{{ user.lifeMovie }}次</span>
          </div>
          <div class="bgc">
            <span>享受长假</span>
            <span>{{ user.lifeLongHolidays }}次</span>
          </div>
          <div class="bgc">
            <span>上厕所</span>
            <span>{{ user.lifeToilet }}次</span>
          </div>
          <div class="right">
            <el-button type="warning" @click="$router.push('/')" size="mini">返回</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="作者信息" name="AuthorInfo">
          <div class="bgc">作者: 鑫宇</div>
          <div class="bgc">
            饭吃一顿少一顿 , 爱的人见一面少一面 , 人生短短几十年 ,愿你我此生不留遗憾
          </div>
          <div class="bgc" style="height: 100px">
            除了两张背景图是在快手找的 , 其他资源均为自己创作 , 设计+创作6小时的小破页面
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import battery from '@/views/Home/components/Battery.vue'
export default {
  name: 'MainIndex',
  components: {
    battery
  },
  data () {
    return {
      activeName: 'home',
      user: JSON.parse(localStorage.getItem('user'))
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  background: url('../../assets/mainBgc.jpg') 0px;
  background-size: cover;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: 50px 20px;
  .resBgc {
    display: flex;
    border-radius: 5px;
    background-color: rgba(000, 000, 000, 0.4);
    height: 400px;
    padding: 10px;
    box-sizing: border-box;
    .bgc {
      display: flex;
      align-items: center;
      background: linear-gradient(to right, #fbecac, #fff078);
      background-clip: text;
      color: transparent;
      height: 50px;
      justify-content: space-between;
      strong {
        color: #fff;
      }
    }
    .right {
      margin-top: 66px;
      display: flex;
      justify-content: flex-end;
    }
    /deep/ .el-tabs__item {
      color: #fff;
    }
  }
}
</style>
